container and media queries - smooth adaptation

revision: February 6, 2026

smooth adaptation to devices

Creating a webpage that smoothly adapts across devices — from iPhones to massive desktops — requires responsive web design (RWD) grounded in modern, maintainable techniques.

Foundational HTML

Critical: viewport meta tag prevents mobile zooming issues.
Use semantic HTML (<header>, <main>, <article>) for accessibility + SEO.

Mobile-first CSS Strategy (progressive Enhancement)

BASE: Mobile (320px+)

code:
		:root {font-size: 16px; /* 1rem = 16px */ --space-sm: 0.75rem; --space-md: 1.5rem;}
		body {line-height: 1.6;	padding: var(--space-sm); font-family: system-ui, sans-serif;}
		.container {width: 100%; max-width: 100%; margin-inline: auto;	padding-inline: var(--space-sm);}
	

TABLET (768px+)

code:
		@media (min-width: 48em) { /* 768px */
			.grid {	display: grid;	grid-template-columns: repeat(2, 1fr);	gap: var(--space-md);}
		}
	

DESKTOP (1024px+)

code:
    	@media (min-width: 64em) { /* 1024px */
			.container {max-width: 90rem; /* 1440px */ padding-inline: var(--space-md);	}
	

ULTRA-WIDE (1800px+)

code:
		@media (min-width: 112.5em) {
  				body { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); /* Subtle scaling */}
	

Fluid layouts and typography

code:
		/* Fluid grid that adapts to container size */
		.auto-grid {display: grid;	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 1.5rem;}

		/* Fluid typography (no media queries needed!) */
		h1 {font-size: clamp(1.75rem, 5vw, 3.5rem);	line-height: 1.2;}

		/* Fluid spacing */
		.section {padding-block: clamp(2rem, 8vw, 5rem);}
	

Modern power-ups

container queries

		.card { container-type: inline-size; /* Enables container queries */}
		@container (min-width: 300px) {
			.card-title { font-size: 1.8rem; }
			.card-img { height: 200px; }
		}
	

viewport units fixed for mobile

Use "dvh/dvb/dvi" instead of "vh" on mobile (iOS/Android safe since 2023).